﻿ $(window).load(function(){$(".loading").fadeOut()})
 let satisfaction = []
$(function () {
    echarts_1();
echarts_4()
echarts_31()
function echarts_1() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart1'));
        const getMiscellany = async () =>{
            let datalist
            const res2 = await fetch('/blockchain-kindness/donations/getMiscellany').then(response => response.json()).then(data => datalist = data.data)

            var data = [{
                title: '**省'
            },
                ['本周'],
                [{
                    name: '评论',
                    max: 150
                }, {
                    name: '发帖',
                    max: 150
                }, {
                    name: '新项目',
                    max: 150
                }, {
                    name: '新增用户',
                    max: 150
                }, {
                    name: '总捐款数',
                    max: 150
                }],
                [res2.commentNum, res2.postNum, res2.newProjectNum, res2.newUserNum, res2.newDonationNum],
            ]
            option = {

                color: ['#9DD060', '#35C96E', '#4DCEF8'],

                tooltip: {},

                radar: {
                    center: ['50%', '50%'],
                    radius: ["25%", "70%"],

                    name: {
                        textStyle: {
                            color: '#72ACD1'
                        }
                    },

                    splitLine: {

                        lineStyle: {

                            color: 'rgba(255,255,255,.0',

                            width: 2

                        }

                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255,0.2)',
                            width: 1,
                            type: 'dotted'

                        },

                    },
                    splitArea: {
                        areaStyle: {
                            color: ['rgba(255,255,255,.1)', 'rgba(255,255,255,0)']
                        }
                    },
                    indicator: data[2]
                },
                series: [{
                    name: '',
                    type: 'radar',
                    data: [{
                        areaStyle: {
                            normal: {
                                opacity: 0.3,
                            }
                        },
                        value: data[3],
                        name: data[1][0]
                    },
                        {
                            areaStyle: {
                                normal: {
                                    opacity: 0.3,
                                }
                            },
                            value: data[4],
                            name: data[1][1]
                        },
                        {
                            areaStyle: {
                                normal: {
                                    opacity: 0.3,
                                }
                            },
                            value: data[5],
                            name: data[1][2]
                        }
                    ]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        getMiscellany()
    }
function  echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));
        var myChart2 = echarts.init(document.getElementById('echart3'));
        let datalist = []
        let datalist1 = []
        const getSatisFaction = async () => {
            const res = await fetch('/blockchain-kindness/donations/getSatisfaction').then(response => response.json()).then(data => datalist = data.data)
            const res1 = await fetch('/blockchain-kindness/donations/getMonthTrend').then(response => response.json()).then(data => datalist1 = data.data)
            const filteredAmounts = datalist1
                .filter(item => item.year === 2023 || item.year === 2024)
                .map(item => item.amounts);
            let firstY = []
            let secondY = []
            for( let i = 0; i < 12; i++)
                firstY[i] = filteredAmounts[i]
            for(let i = 12;i < 24; i++)
                secondY[i-12] = filteredAmounts[i]
            datalist = datalist.map(item => item.count)
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['用户'],
                    top:'2%',
                    textStyle: {
                        color: "rgba(255,255,255,.5)",
                        fontSize: '12',

                    },
                    itemWidth: 12,
                    itemHeight: 12,
                    itemGap: 35
                },
                grid: {
                    left: '0%',
                    top:'40px',
                    right: '0%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['1', '2', '3', '4', '5', '6', '7', '8', '9','10'],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },

                    axisTick: {
                        show: false,
                    },
                    axisLabel:  {
                        interval: 0,
                        // rotate:50,
                        show: true,
                        splitNumber: 15,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '14',
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        //formatter: '{value} %'
                        show:true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '14',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1	)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [{
                    name: '人数',
                    type: 'bar',
                    data: datalist,
                    barWidth:'20%', //柱子宽度
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color:'#2f89cf',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                },
                ]
            };
            option2 = {
                //  backgroundColor: '#00265f',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['2023年', '2024年'],
                    top:'5%',
                    textStyle: {
                        color: "#fff",
                        fontSize: '12',

                    },

                    itemGap: 35
                },
                grid: {
                    left: '0%',
                    top:'40px',
                    right: '0%',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月','7月','8月','9月','10月','11月','12月'],
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel:  {
                        interval: 0,
                        // rotate:50,
                        show: true,
                        splitNumber: 5,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        //formatter: '{value} %'
                        show:true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1	)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [{
                    name: '2023年',
                    type: 'line',
                    smooth: true,
                    data: firstY,
                    itemStyle: {
                        normal: {
                            color:'#2f89cf',
                            opacity: 1,

                            barBorderRadius: 5,
                        }
                    }
                }, {
                    name: '2024年',
                    type: 'line',
                    smooth: true,
                    data: secondY,
                    barWidth:'15',
                    // barGap: 1,
                    itemStyle: {
                        normal: {
                            color:'#62c98d',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                },
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option2);
            myChart2.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });
        }
        getSatisFaction()
    }
function echarts_31() {
        // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb01'));
	var myChart2 = echarts.init(document.getElementById('fb02')); 
	var myChart3 = echarts.init(document.getElementById('fb03'));
	var myChart4 = echarts.init(document.getElementById('fb04')); 
	var myChart5 = echarts.init(document.getElementById('myd1'));
    let datalist = []
    let datalist1 = []
    let datalist2
    let datalist3
    let start
    let middle
    let end
    const getAgeInterval = async () => {
        const res = await fetch('/blockchain-kindness/donations/getAgeInterval').then(response => response.json()).then(data => datalist = data.data)
        const res1 = await fetch('/blockchain-kindness/donations/getGenderRatio').then(response => response.json()).then(data => datalist1 = data.data)
        const res2 = await fetch('/blockchain-kindness/donations/getProjectStage').then(response => response.json()).then(data => datalist2 = data.data)
        const res3 = await fetch('/blockchain-kindness/donations/getPurposeDetailPercent').then(response => response.json()).then(data => datalist3 = data.data)
        const chunkSize = 5;
        const summedPercents = [];
        for (let i = 0; i < datalist3.length; i += chunkSize) {
            const chunk = datalist3.slice(i, i + chunkSize);
            const sum = chunk.reduce((acc, item) => acc + item.percent, 0);
            summedPercents.push(sum);
        }-
        console.log(summedPercents);
        start = datalist2.开始项目
        middle = datalist2.进行中
        end = datalist2.结束项目
        console.log(res1)
        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position:function(p){   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                orient: 'vertical',
                top:'25%',
                right:0,
                itemWidth: 10,
                itemHeight: 10,
                data:['0-20岁','20-29岁','30-39岁','40-49岁','50岁以上'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize:'12',
                }
            },
            series: [
                {
                    name:'年龄分布',
                    type:'pie',
                    center: ['35%', '50%'],
                    radius: ['40%', '50%'],
                    color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828','#e58c00','#eb295b','#e58c00'],
                    label: {show:false},
                    labelLine: {show:false},
                    data:[
                        {value:datalist.firstAgeStep, name:'0-20岁'},
                        {value:datalist.secondAgeStep, name:'20-29岁'},
                        {value:datalist.thirdAgeStep, name:'30-39岁'},
                        {value:datalist.fourthAgeStep, name:'40-49岁'},
                        {value:datalist.fifthAgeStep, name:'50岁以上'},
                    ]
                }
            ]
        };
        option2 = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position:function(p){   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                orient: 'vertical',
                top:'25%',
                right:'8%',
                itemWidth: 10,
                itemHeight: 10,
                data:['男','女'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize:'12',
                }
            },
            series: [
                {
                    name:'男女比例',
                    type:'pie',
                    center: ['40%', '50%'],
                    radius: ['40%', '50%'],
                    color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828','#e58c00','#eb295b'],
                    label: {show:false},
                    labelLine: {show:false},
                    data:[
                        {value:datalist1.maleNumber, name:'男'},
                        {value:datalist1.femaleNumber, name:'女'},

                    ]
                }
            ]
        };
        option3 = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position:function(p){   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                orient: 'vertical',
                top:'center',
                right:0,
                itemWidth: 10,
                itemHeight: 10,
                data:['社会救助与福利','教育与文化发展','生态与环境'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize:'12',
                }
            },
            series: [
                {
                    name:'数据',
                    type:'pie',
                    center: ['35%', '50%'],
                    radius: ['40%', '50%'],
                    color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828','#e58c00','#eb295b'],
                    label: {show:false},
                    labelLine: {show:false},
                    data:[

                        {value:summedPercents[0], name:'社会救助与福利'},
                        {value:summedPercents[1], name:'教育与文化发展'},
                        {value:summedPercents[2], name:'生态与环境'},
                    ]
                }
            ]
        };
        option4 = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position:function(p){   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                orient: 'vertical',
                top:'center',
                right:'8%',
                itemWidth: 10,
                itemHeight: 10,
                data:['生活救助','医疗救助','教育救助','住房救助','灾害救助','教育捐赠','奖助学金','师资奖励','学科建设','教育创新','生态保护','节能减排','环保教育','环保科研','环境改善'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize:'12',
                }
            },
            series: [
                {
                    name:'业务分类',
                    type:'pie',
                    center: ['40%', '50%'],
                    radius: ['40%', '50%'],
                    color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828','#e58c00','#eb295b'],
                    label: {show:false},
                    labelLine: {show:false},
                    data:[
                        {value:datalist3[0].percent, name:'生活救助'},
                        {value:datalist3[1].percent, name:'医疗救助'},
                        {value:datalist3[2].percent, name:'教育救助'},
                        {value:datalist3[3].percent, name:'住房救助'},
                        {value:datalist3[4].percent, name:'灾害救助'},
                        {value:datalist3[5].percent, name:'教育捐赠'},
                        {value:datalist3[6].percent, name:'奖助学金'},
                        {value:datalist3[7].percent, name:'师资奖励'},
                        {value:datalist3[8].percent, name:'学科建设'},
                        {value:datalist3[9].percent, name:'教育创新'},
                        {value:datalist3[10].percent, name:'生态保护'},
                        {value:datalist3[11].percent, name:'节能减排'},
                        {value:datalist3[12].percent, name:'环保教育'},
                        {value:datalist3[13].percent, name:'环保科研'},
                        {value:datalist3[14].percent, name:'环境改善'}
                    ]
                }
            ]
        };
        option5 = {
            grid: {
                left: '0',
                right: '0',
                top: '10%',
                bottom: '24%',
                //containLabel: true
            },
            legend: {
                data: ['等待', '进行', '结束'],
                bottom:0,
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    color: "#fff",
                    fontSize: '10',

                },

                itemGap: 5
            },
            tooltip: {
                show: "true",
                trigger: 'item'
            },
            yAxis: {
                type: 'value',
                show: false,
            },
            xAxis: [{
                type: 'category',
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#363e83',
                    }
                },
                axisLabel: {
                    show: false,
                    //   inside: true,
                    textStyle: {
                        color: "rgba(255,255,255,1)",
                        fontWeight: 'normal',
                        fontSize: '12',
                    },
                    // formatter:function(val){
                    //     return val.split("").join("\n")
                    // },
                },
                data: ['业务办量统计']
            }

            ],
            series: [
                {
                    name: '等待',
                    type: 'bar',
                    barWidth: '20',

                    itemStyle: {
                        normal: {
                            show: true,
                            color:'#20aa92',
                            barBorderRadius: 50,
                            borderWidth: 0,
                        }
                    },
                    zlevel: 2,
                    barGap: '100%',
                    data: [start],
                    label: {
                        formatter: "{c}人",
                        show: true,
                        position: 'top',
                        textStyle: {
                            fontSize:12,
                            color: 'rgba(255,255,255,.6)',
                        }
                    },
                },
                {
                    name: '进行',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            show: true,
                            color:'#f4664e',
                            barBorderRadius: 50,
                            borderWidth: 0,
                        }
                    },
                    zlevel: 2,
                    barWidth: '20',
                    data: [middle],
                    label: {
                        formatter: "{c}人",
                        show: true,
                        position: 'top',
                        textStyle: {
                            fontSize:12,
                            color: 'rgba(255,255,255,.6)',
                        }
                    },
                },
                {
                    name: '结束',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            show: true,
                            color:'#0c93dc',
                            barBorderRadius: 50,
                            borderWidth: 0,
                        }
                    },
                    zlevel: 2,
                    barWidth: '20',
                    data: [end],
                    label: {
                        formatter: "{c}份",
                        show: true,
                        position: 'top',
                        textStyle: {
                            fontSize:12,
                            color: 'rgba(255,255,255,.6)',
                        }
                    },
                },

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
        myChart4.setOption(option4);
        myChart5.setOption(option5);

        window.addEventListener("resize",function(){
            myChart.resize();
            myChart7.resize();
            myChart2.resize();
            myChart3.resize();
            myChart4.resize();
            myChart5.resize();

        });
        console.log(datalist)
    }
    getAgeInterval()
    }
})



		
		
		


		









